<template>
  <div>
    <el-upload
      ref="upload"
      class="upload-demo"
      :action="uploadUrl"
      :on-success="handleSuccess"
      :on-error="handleError"
      :limit="1"
      :on-exceed="handleExceed"
      :auto-upload="false"
      :file-list="fileList"
    >
      <el-button slot="trigger" size="mini" type="primary" plain="">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="mini" type="success" plain @click="submitUpload">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  props: {
    uploadUrl: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit()
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    handleError(err, file) {
      this.$notify({
        title: '更新失败',
        message: res.data,
        type: 'error'
      })
    },
    handleSuccess(res, file) {
      console.log(res)
      const status = res.status
      if (status === 200) {
        this.$notify({
          title: '更新成功',
          message: res.data,
          type: 'success'
        })
      } else if (status === 500) {
        this.$notify.error({
          title: '更新失败',
          message: res.msg
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
